<template>
  <el-container>
    <el-aside width="200px" style="border-right: 1px solid #ccc">
      <el-menu default-active="manage" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="manage" @click="goToManage">
          <template #title>公会管理</template>
        </el-menu-item>
        <el-menu-item index="member" @click="goToMember">
          <template #title>公会成员</template>
        </el-menu-item>
        <el-menu-item index="notice" @click="goToNotice">
          <template #title>公会公告</template>
        </el-menu-item>
        <el-menu-item index="activity" @click="goToActivity">
          <template #title>公会活动</template>
        </el-menu-item>
        <el-menu-item index="contribution" @click="goToContribution">
          <template #title>公会贡献</template>
        </el-menu-item>
        <el-menu-item index="diplomacy" @click="goToDiplomacy">
          <template #title>公会外交</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main style="background-color: rgba(246, 249, 248)">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goToManage = () => {
  router.push({ name: 'guild-manage' });
};

const goToMember = () => {
  router.push({ name: 'guild-member' });
};

const goToNotice = () => {
  router.push({ name: 'guild-notice' });
};

const goToActivity = () => {
  router.push({ name: 'guild-activity' });
};

const goToContribution = () => {
  router.push({ name: 'guild-contribution' });
};

const goToDiplomacy = () => {
  router.push({ name: 'guild-diplomacy' });
};
</script>

<style scoped>
.el-header {
  height: 55px;
  border-bottom: 1px solid #ccc;
}
</style>